<template>
  <view class="invite-page">
    <!-- Header with back button -->
    <view class="header-section">
      <image src="/static/images/invite/back-icon@3x.png" class="back-icon" @click="goBack" />
      <text class="header-title">邀请有礼</text>
    </view>

    <!-- Main invite card -->
    <view class="invite-card">
      <view class="invite-content">
        <text class="invite-title">邀请好友，赢取奖励</text>
        <view class="invite-desc">
          每成功邀请一位好友开并开通高级服务<br />
          将根据段位要求升级，并获得段位级别奖励。
        </view>
        <view class="invite-btn-container">
          <view class="invite-btn" @click="handleInvite">
            <text class="invite-btn-text">立即邀请</text>
          </view>
        </view>
        
        <!-- 邀请码显示 -->
        <!-- <view class="invite-code-section" v-if="inviteCode">
          <text class="invite-code-label">邀请码</text>
          <view class="invite-code-box">
            <text class="invite-code-text">{{ inviteCode }}</text>
            <view class="code-copy-btn" @click.stop="copyInviteCode">
              <text class="code-copy-text">复制</text>
            </view>
          </view>
        </view> -->
      </view>
    </view>
        <!-- Bottom invite section -->
        <view class="bottom-invite">
      <view class="invite-card">
        <text class="invite-card-title">邀请好友加入</text>

        <view class="invite-content">
          <!-- 邀请链接 -->
          <view class="invite-link">
            <text class="link-text">{{ inviteLink }}</text>
            <view class="copy-btn" @click="copyLink">
              <text class="copy-text">复制</text>
            </view>
          </view>

          <!-- 二维码 -->
          <view class="qr-container">
            <view class="qr-code" v-if="inviteLink">
              <uv-qrcode
                ref="qrcode"
                canvas-id="qrcode"
                :value="inviteLink"
                :size="130"
                :options="qrcodeOptions"
              ></uv-qrcode>
            </view>
            <view class="qr-code" v-else>
              <text class="qr-loading">加载中...</text>
            </view>
          </view>

          <!-- 保存图片按钮 -->
          <view class="save-btn" @click="saveQRCode">
            <text class="save-text">保存图片</text>
          </view>
        </view>
      </view>
    </view>
    <!-- Statistics section -->
    <view class="stats-section">
      <view class="stat-item">
        <text class="stat-number">{{ invitedCount }}</text>
        <text class="stat-label">已邀请好友</text>
      </view>
      <view class="stat-item">
        <text class="stat-number">{{ rewardAmount }}</text>
        <text class="stat-label">累计收益</text>
      </view>
    </view>

    <!-- My rewards section -->
    <text class="section-title">我的奖励</text>

    <!-- Level progress -->
    <view class="level-progress">
      <view class="progress-header">
        <text class="progress-title">段位进度</text>
        <text class="progress-count">{{ invitedCount }}/20位好友</text>
      </view>

      <view class="progress-bar">
        <view class="progress-track">
          <view class="progress-fill" :style="{ width: progressWidth }"></view>
        </view>
        <view class="progress-dots">
          <view v-for="(level, index) in levels" :key="index" class="progress-dot"
            :class="{ active: index <= currentLevel }" :style="{ left: level.position }">
            <view class="dot-circle"></view>
            <text class="level-text">{{ level.name }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- Reward cards -->
    <view class="reward-cards" v-if="rewardLevels.length > 0">
      <view v-for="(reward, index) in rewardLevels" :key="reward.id" class="reward-card" :class="reward.status">
        <view class="card-content">
          <view class="badge-container">
            <image 
              :src="reward.icon" 
              class="badge-icon"
              mode="aspectFit"
              @error="handleImageError($event, reward)"
            />
          </view>
          <view class="reward-info">
            <text class="reward-title">{{ reward.name }}</text>
            <text class="reward-desc">
              {{ reward.requirement }}<br />
              {{ reward.reward }}
            </text>
            <view class="reward-status" :class="reward.status">
              <text class="status-text">{{ reward.statusText }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 空状态提示 -->
    <view class="empty-state" v-else>
      <text class="empty-text">暂无奖励等级信息</text>
    </view>
  </view>
</template>

<script>
import { levelIntro, getInviteSummary, getInviteUrl } from '@/api/user'
export default {
  name: 'InvitePage',
  data() {
    return {
      // 接口返回的数据
      invitedCount: 0, // 已邀请好友数
      rewardAmount: '0U', // 累计收益
      reachLevelIds: [], // 达到的等级ID列表
      reachLevelNames: [], // 达到的等级名称列表

      // 邀请链接和二维码
      inviteLink: '', // 邀请链接
      inviteCode: '', // 邀请码

      // 二维码配置
      qrcodeOptions: {
        margin: 0,
        backgroundColor: '#ffffff',
        foregroundColor: '#1DD1A1'
      },

      currentLevel: 2, // Current achieved level (0: 5friends, 1: 10friends, 2: 15friends, 3: 20friends)
      levels: [
        { name: '0', position: '12.5%' },
        { name: '5\n铜级', position: '37.5%' },
        { name: '10\n银级', position: '62.5%' },
        { name: '20\n金级', position: '87.5%' }
      ],
      rewardLevels: [] // 奖励等级列表，从接口获取
    }
  },
  computed: {
    progressWidth() {
      // 计算进度百分比：已邀请数 / 20（金级目标）
      const percentage = Math.min((this.invitedCount / 20) * 100, 100)
      return `${percentage}%`
    }
  },
  onLoad() {
    // 获取等级介绍
    this.getLevelIntroData()
    
    // 获取邀请汇总信息
    this.getInviteSummaryData()
    
    // 获取邀请链接和二维码
    this.getInviteUrlData()
  },
  methods: {
    /**
     * 获取等级介绍数据
     */
    async getLevelIntroData() {
      try {
        const res = await levelIntro()
        console.log('等级介绍:', res)
        
        if (res.code === 200 && res.data && Array.isArray(res.data)) {
          // 将接口数据映射到页面需要的格式
          this.rewardLevels = res.data
            .sort((a, b) => (a.sort || 0) - (b.sort || 0)) // 按排序字段排序
            .map((item, index) => {
              // 计算状态
              let status = 'pending' // 默认未达成
              let statusText = `${item.currentlyCount || 0}/${item.minInviteCount || 0}`
              
              if (item.isReached) {
                status = 'completed'
                statusText = '已达成'
              } else if ((item.currentlyCount || 0) > 0) {
                status = 'in-progress'
              }
              
              // 格式化奖励列表
              let rewardText = ''
              if (item.rewardList && item.rewardList.length > 0) {
                rewardText = item.rewardList.map(reward => {
                  // 根据奖励类型格式化显示，支持多种字段格式
                  if (reward.rewardDesc) {
                    return reward.rewardDesc
                  } else if (reward.rewardType && reward.rewardAmount) {
                    return `${reward.rewardAmount}${reward.rewardType}`
                  } else if (reward.rewardType) {
                    return reward.rewardType
                  } else if (reward.rewardAmount) {
                    return reward.rewardAmount
                  } else if (reward.description) {
                    return reward.description
                  }
                  return ''
                }).filter(text => text).join('、')
              }
              
              // 处理图标，如果为null或空，使用默认图片
              let iconUrl = item.icon
              if (!iconUrl) {
                // 根据等级名称使用默认图标
                if (item.levelName && item.levelName.includes('铜')) {
                  iconUrl = '/static/images/invite/copper-level.png'
                } else if (item.levelName && item.levelName.includes('银')) {
                  iconUrl = '/static/images/invite/silver-level.png'
                } else if (item.levelName && item.levelName.includes('金')) {
                  iconUrl = '/static/images/invite/silver-badge.png'
                } else {
                  iconUrl = '/static/images/invite/copper-level.png' // 默认图标
                }
              }
              
              return {
                id: item.id || index,
                name: item.levelName || `等级${index + 1}`,
                icon: iconUrl,
                requirement: item.description || `邀请${item.minInviteCount || 0}位好友解锁高级服务将升级为${item.levelName || ''}`,
                reward: rewardText || '',
                status: status,
                statusText: statusText,
                progress: `${item.currentlyCount || 0}/${item.minInviteCount || 0}`,
                // 保留原始数据
                rawData: item
              }
            })
          
          console.log('处理后的奖励等级列表:', this.rewardLevels)
        } else {
          console.warn('等级介绍数据格式不正确:', res)
        }
      } catch (error) {
        console.error('获取等级介绍失败:', error)
        // 不显示错误提示，避免影响用户体验
      }
    },
    
    /**
     * 获取邀请汇总信息
     */
    async getInviteSummaryData() {
      try {
        uni.showLoading({ title: '加载中...' })
        
        const res = await getInviteSummary()
        console.log('邀请汇总信息:', res)
        
        if (res.code === 200 && res.data) {
          // 更新数据
          this.invitedCount = res.data.invitedCount || 0
          this.rewardAmount = res.data.rewardAmount || '0U'
          this.reachLevelIds = res.data.reachLevelId || []
          this.reachLevelNames = res.data.reachLevelName || []
          
          // 根据达到的等级数量计算当前等级
          this.currentLevel = this.reachLevelIds.length > 0 ? this.reachLevelIds.length - 1 : 0
          
          console.log('更新后的数据:', {
            invitedCount: this.invitedCount,
            rewardAmount: this.rewardAmount,
            currentLevel: this.currentLevel,
            reachLevelNames: this.reachLevelNames
          })
        } else {
          throw new Error(res.message || '获取数据失败')
        }
      } catch (error) {
        console.error('获取邀请汇总信息失败:', error)
        uni.showToast({
          title: error.message || '加载失败，请重试',
          icon: 'none',
          duration: 2000
        })
      } finally {
        uni.hideLoading()
      }
    },
    
    /**
     * 获取邀请链接和二维码
     */
    async getInviteUrlData() {
      try {
        const res = await getInviteUrl()
        console.log('邀请链接信息:', res)

        if (res.code === 200 && res.data) {
          // 更新邀请链接
          this.inviteLink = res.data.url || res.data.originUrl || ''
          this.inviteCode = res.data.inviteCode || ''

          console.log('更新后的邀请信息:', {
            inviteLink: this.inviteLink,
            inviteCode: this.inviteCode
          })
        } else {
          throw new Error(res.message || '获取邀请链接失败')
        }
      } catch (error) {
        console.error('获取邀请链接失败:', error)
        uni.showToast({
          title: error.message || '获取邀请链接失败，请重试',
          icon: 'none',
          duration: 2000
        })
      }
    },
    
    goBack() {
      uni.navigateBack()
    },

    /**
     * 点击立即邀请按钮
     * 复制邀请链接并显示提示
     */
    handleInvite() {
      // 复制邀请链接到剪贴板
      uni.setClipboardData({
        data: this.inviteLink,
        success: () => {
          // 显示已复制提示，5秒后自动消失
          uni.showToast({
            title: '已复制',
            icon: 'success',
            duration: 5000
          })
        },
        fail: (err) => {
          console.error('复制失败:', err)
          uni.showToast({
            title: '复制失败，请重试',
            icon: 'none',
            duration: 2000
          })
        }
      })
    },

    copyLink() {
      uni.setClipboardData({
        data: this.inviteLink,
        success: () => {
          uni.showToast({
            title: '链接已复制',
            icon: 'none'
          })
        }
      })
    },

    /**
     * 处理图片加载失败
     */
    handleImageError(_event, reward) {
      console.warn('图片加载失败:', reward.icon)
      // 设置默认图标
      if (reward.name && reward.name.includes('铜')) {
        reward.icon = '/static/images/invite/copper-level.png'
      } else if (reward.name && reward.name.includes('银')) {
        reward.icon = '/static/images/invite/silver-level.png'
      } else if (reward.name && reward.name.includes('金')) {
        reward.icon = '/static/images/invite/silver-badge.png'
      } else {
        reward.icon = '/static/images/invite/copper-level.png'
      }
    },
    
    /**
     * 保存二维码到相册
     */
    saveQRCode() {
      if (!this.inviteLink) {
        uni.showToast({
          title: '邀请链接未加载完成',
          icon: 'none'
        })
        return
      }

      uni.showLoading({
        title: '保存中...'
      })

      // #ifdef H5
      this.saveQRCodeH5()
      // #endif

      // #ifdef APP-PLUS || MP-WEIXIN
      this.saveQRCodeApp()
      // #endif
    },

    /**
     * 复制邀请码
     */
    copyInviteCode() {
      if (!this.inviteCode) {
        uni.showToast({
          title: '邀请码未加载',
          icon: 'none'
        })
        return
      }
      uni.setClipboardData({
        data: this.inviteCode,
        success: () => {
          uni.showToast({
            title: '邀请码已复制',
            icon: 'success'
          })
        }
      })
    },

    /**
     * H5 端保存二维码
     */
    saveQRCodeH5() {
      try {
        // 尝试多种方式获取 canvas 元素
        const qrContainer = document.querySelector('.qr-code')
        let canvas = null
        
        if (qrContainer) {
          canvas = qrContainer.querySelector('canvas')
        }
        
        if (!canvas) {
          canvas = document.querySelector('[canvas-id="qrcode"]') || 
                   document.querySelector('canvas[id*="qrcode"]') ||
                   document.querySelector('.qr-container canvas') ||
                   document.querySelector('canvas')
        }
        
        if (!canvas) {
          uni.hideLoading()
          uni.showToast({
            title: '请长按二维码保存',
            icon: 'none'
          })
          return
        }

        // 转换为图片并下载
        const dataUrl = canvas.toDataURL('image/png')
        const link = document.createElement('a')
        link.href = dataUrl
        link.download = `invite_qrcode_${Date.now()}.png`
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)

        uni.hideLoading()
        uni.showToast({
          title: '保存成功',
          icon: 'success'
        })
      } catch (err) {
        uni.hideLoading()
        console.error('H5保存失败:', err)
        uni.showToast({
          title: '请长按二维码保存',
          icon: 'none'
        })
      }
    },

    /**
     * APP/小程序端保存二维码
     */
    async saveQRCodeApp() {
      try {
        // 尝试使用 uv-qrcode 组件的方法
        const qrcodeRef = this.$refs.qrcode
        
        if (qrcodeRef && typeof qrcodeRef.save === 'function') {
          // 使用组件自带的 save 方法
          await qrcodeRef.save({
            success: () => {
              uni.hideLoading()
              uni.showToast({
                title: '保存成功',
                icon: 'success'
              })
            },
            fail: (err) => {
              console.error('组件保存失败:', err)
              this.fallbackSaveApp()
            }
          })
        } else if (qrcodeRef && typeof qrcodeRef.toTempFilePath === 'function') {
          // 使用 toTempFilePath 方法
          const tempFilePath = await qrcodeRef.toTempFilePath()
          this.saveToAlbum(tempFilePath)
        } else {
          // 回退到原始方法
          this.fallbackSaveApp()
        }
      } catch (err) {
        console.error('保存失败:', err)
        this.fallbackSaveApp()
      }
    },

    /**
     * 回退保存方法
     */
    fallbackSaveApp() {
      uni.canvasToTempFilePath({
        canvasId: 'qrcode',
        fileType: 'png',
        quality: 1,
        success: (res) => {
          console.log('获取临时文件路径成功:', res.tempFilePath)
          this.saveToAlbum(res.tempFilePath)
        },
        fail: (err) => {
          uni.hideLoading()
          console.error('获取临时文件路径失败:', err)
          uni.showToast({
            title: '保存失败，请长按二维码保存',
            icon: 'none'
          })
        }
      }, this)
    },

    /**
     * 保存到相册
     */
    saveToAlbum(filePath) {
      uni.saveImageToPhotosAlbum({
        filePath: filePath,
        success: () => {
          uni.hideLoading()
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          })
        },
        fail: (err) => {
          uni.hideLoading()
          console.error('保存到相册失败:', err)
          if (err.errMsg && (err.errMsg.includes('auth') || err.errMsg.includes('deny'))) {
            uni.showModal({
              title: '需要相册权限',
              content: '请在系统设置中允许访问相册',
              confirmText: '去设置',
              cancelText: '取消',
              success: (modalRes) => {
                if (modalRes.confirm) {
                  uni.openSetting()
                }
              }
            })
          } else {
            uni.showToast({
              title: '保存失败，请重试',
              icon: 'none'
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.invite-page {
  min-height: 100vh;
  background: linear-gradient(to bottom, #E8F8F5 0%, #f8f9fa 100%);
  padding-bottom: 40rpx;
}

// Header section
.header-section {
  display: flex;
  align-items: center;
  padding: 0  40rpx 30rpx 40rpx;
  padding-top: calc(var(--status-bar-height) + 20rpx);

  .back-icon {
    width: 17rpx;
    height: 30rpx; 
    margin-right: 20rpx;
  }

  .header-title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
  }
}

// Main invite card
.invite-card {
  margin: 0 30rpx 40rpx;
  padding: 50rpx 40rpx;
  background: url('/static/images/invite/invite-bg-new.png') no-repeat;
  background-size: 100% 100%;
  border-radius: 24rpx;
  position: relative;  
  overflow: hidden;

  .invite-content {
    position: relative;  
    z-index: 1;

    .invite-title {
      display: block;
      font-size: 60rpx;
      font-weight: 700;
      color: #fff;
      margin-bottom: 20rpx;
      text-align: center;
    }

    .invite-desc {
      text-align: center;
      font-size: 28rpx;
      color: rgba(255, 255, 255, 0.9);
    }

    .invite-btn-container {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20rpx;
    }

    .invite-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 18rpx 50rpx;
      background: linear-gradient(135deg, #FF8C42 0%, #FF7A29 100%);
      border-radius: 50rpx;

      .invite-btn-text {
        font-size: 30rpx;
        font-weight: 600;
        color: #fff;
      }
    }

    // 邀请码区域样式
    .invite-code-section {
      margin-top: 40rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;

      .invite-code-label {
        font-size: 24rpx;
        color: rgba(255, 255, 255, 0.8);
        margin-bottom: 16rpx;
        letter-spacing: 2rpx;
      }

      .invite-code-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 16rpx;
        padding: 16rpx 24rpx;
        min-width: 320rpx;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

        .invite-code-text {
          font-size: 40rpx;
          font-weight: 700;
          color: #fff;
          letter-spacing: 6rpx;
          margin-right: 30rpx;
          text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
        }

        .code-copy-btn {
          background: #fff;
          border-radius: 30rpx;
          padding: 8rpx 24rpx;
          box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
          transition: all 0.3s;

          &:active {
            transform: scale(0.95);
            background: #f0f0f0;
          }

          .code-copy-text {
            font-size: 24rpx;
            color: #FF7A29;
            font-weight: 600;
          }
        }
      }
    }
  }
}

// Statistics section
.stats-section {
  display: flex;
  gap: 20rpx;
  margin: 0 30rpx 60rpx;

  .stat-item {
    flex: 1;
    text-align: center;
    background: #fff;
    padding: 20rpx;
    border-radius: 20rpx;

    .stat-number {
      display: block;
      font-size: 72rpx;
      font-weight: 700;
      color: #1DD1A1;
      margin-bottom: 10rpx;
    }

    .stat-label {
      font-size: 28rpx;
      color: #666;
    }
  }
}

// Section title
.section-title {
  display: block;
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  margin: 0 30rpx 40rpx;
}

// Level progress
.level-progress {
  margin: 0 30rpx 60rpx;
  background: #fff;
  padding: 40rpx 30rpx;
  border-radius: 20rpx;

  .progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40rpx;

    .progress-title {
      font-size: 32rpx;
      font-weight: 500;
      color: #333;
    }

    .progress-count {
      font-size: 28rpx;
      color: #1DD1A1;
    }
  }

  .progress-bar {
    position: relative;
    padding-bottom: 80rpx;

    .progress-track {
      height: 32rpx;
      background: #cdf5f0;
      border-radius: 16rpx;

      .progress-fill {
        height: 100%;
        background: #06CBB6;
        border-radius: 16rpx;
        transition: width 0.3s ease;
      }
    }

    .progress-dots {
      position: absolute;
      top: 8rpx;
      left: 0;
      right: 0;
      height: 16rpx;

      .progress-dot {
        position: absolute;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;

        .dot-circle {
          width: 16rpx;
          height: 16rpx;
          background: #cdf5f0;
          border: 2rpx solid #FFFFFF;
          border-radius: 50%;
          box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.15);
        }

        &.active .dot-circle {
          background: #06CBB6;
          border-color: #FFFFFF;
        }

        .level-text {
          position: absolute;
          top: 35rpx;
          white-space: pre-line;
          text-align: center;
          line-height: 1.3;
          font-size: 24rpx;
          color: #666;
          min-width: 60rpx;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
  }
}

// Reward cards
.reward-cards {
  padding: 0 30rpx;

  .reward-card {
    padding: 40rpx 30rpx;
    margin-bottom: 30rpx;
    background: #fff;
    border-radius: 20rpx;
    text-align: center;

    .card-content {
      display: flex;
      flex-direction: column;
      align-items: center;

      .badge-container {
        margin-bottom: 30rpx;

        .badge-icon {
          width: 160rpx;
          height: 160rpx;
        }
      }

      .reward-info {
        text-align: center;

        .reward-title {
          display: block;
          font-size: 36rpx;
          font-weight: 600;
          color: #333;
          margin-bottom: 20rpx;
        }

        .reward-desc {
          display: block;
          font-size: 28rpx;
          color: #666;
          line-height: 1.6;
          margin-bottom: 30rpx;
        }

        .reward-status {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          padding: 12rpx 40rpx;
          border-radius: 25rpx;

          &.completed {
            background: #E8F8F5;

            .status-text {
              color: #06CBB6;
            }
          }

          &.in-progress {
            background: #E6F7FF;

            .status-text {
              color: #1890FF;
            }
          }

          &.pending {
            background: #F5F5F5;

            .status-text {
              color: #999999;
            }
          }

          .status-text {
            font-size: 28rpx;
            font-weight: 500;
          }
        }
      }
    }
  }
}

// Empty state
.empty-state {
  padding: 80rpx 30rpx;
  text-align: center;
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}

// Bottom invite section
.bottom-invite {
  margin-bottom: 60rpx;

  .invite-card {
    background: linear-gradient(135deg, #1DD1A1 0%, #4EDDC4 100%);
    border-radius: 24rpx;
    padding: 40rpx 32rpx;
    box-shadow: 0 8rpx 24rpx rgba(29, 209, 161, 0.25);

    .invite-card-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #fff;
      margin-bottom: 30rpx;
      display: block;
      text-align: left;
      padding-left: 10rpx;
    }

    .invite-content {
      background: #fff;
      border-radius: 20rpx;
      padding: 40rpx 30rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .invite-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20rpx 24rpx;
        background: #F2FBF9;
        border-radius: 16rpx;
        margin-bottom: 40rpx;
        width: 100%;
        box-sizing: border-box;

        .link-text {
          flex: 1;
          font-size: 24rpx;
          color: #1DD1A1;
          margin-right: 20rpx;
          word-break: break-all;
          text-align: left;
          line-height: 1.4;
        }

        .copy-btn {
          width: 100rpx;
          height: 50rpx;
          background: #1DD1A1;
          border-radius: 25rpx;  
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          
          .copy-text {
            font-size: 24rpx;
            color: #fff;
            font-weight: 500;
          }
        }
      }

      .qr-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 40rpx;

        .qr-code {
          width: 260rpx;
          height: 260rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #fff;

          .qr-loading {
            font-size: 24rpx;
            color: #999;
          }
        }
      }

      .save-btn {
        width: 100%;
        height: 88rpx;
        background: #fff;
        border: 2rpx solid #1DD1A1;
        border-radius: 44rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;

        &:active {
          transform: scale(0.98);
          background: #f9f9f9;
        }

        .save-text {
          font-size: 30rpx;
          color: #1DD1A1;
          font-weight: 500;
        }
      }
    }
  }
}
</style>
